<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
  <div class="card-pf">
    <div class="card-pf-body">
      <div class="card-pf-title-with-icon">
        <custom-icon resource="template" kind="template" class="image-icon"></custom-icon>
        <h2 class="card-pf-title">
          <span ng-bind-html="template | displayName | highlightKeywords : keywords"></span>
        </h2>
      </div>
      <p>
        <truncate-long-text
          class="project-description"
          content="(template | description) || template.metadata.name"
          limit="200"
          use-word-boundary="true"
          highlight-keywords="keywords"></truncate-long-text>
      </p>
      <p ng-if="template | annotation : 'provider'">
        Provider: {{template | annotation : 'provider'}}
      </p>
      <!-- Only show the namespace if it's not in the shared openshift namespace -->
      <p ng-if="template.metadata.namespace !== 'openshift'">
        Namespace: {{template.metadata.namespace}}
      </p>
    </div>
    <div class="card-pf-footer clearfix">
      <a class="btn btn-default pull-right" ng-href="{{template | createFromTemplateURL : project}}">
        Select
      </a>
    </div>
  </div>
</div>
